{% extends 'movies/base.html' %}
{% block content %}


<div class="container-fluid" style="text-align: center;">
    <div class="row row-cols-1" style="height: 30px;">

    </div>

    <div class="row row-cols-4">


        <div class="col">

            <figure class="figure">
                <img class="rounded-lg float-left shadow-lg border border-white" src="{{ object.cover }}"
                    alt="{{ object.cover }}" style="height: 840px; max-width: 600px;">
                <figcaption class="figure-caption">


                    <h1 style="color: black;font: outline;">
                        {{object.name}}
                    </h1><br>

                    {% if object.alias %}
                    <p style="font-size: large; color:black">
                        别名: {{object.alias}}
                    </p>
                    {% endif %}

                    {% if object.directors %}
                    <a style="font-size: 30px; text-decoration: none;" href="#">
                        导演: {{object.directors}}
                    </a><br>
                    {% endif %}

                    <div style="height: 30px;"></div>

                    {% if object.actors %}
                    <h5 style="text-align: justify;">
                        主演: {{object.actors}}
                    </h5><br>
                    {% endif %}

                    {% if object.regions %}
                    <h5 style="color:black;">
                        地区： {{object.regions}}
                    </h5><br>
                    {% endif %}

                    {% if object.languages %}
                    <h5>
                        语言： {{object.languages}}
                    </h5>
                    {% endif %}

                    <div style="height: 30px;"></div>

                    {% if object.release_date %}
                    <h5 style="color: dodgerblue;">
                        上映日期： {{object.release_date}}
                    </h5><br>
                    {% endif %}

                    {% if object.storyline %}
                    <p style="font-size: large; font-weight: 200; color:black; text-align: justify;">
                        故事梗概： {{object.storyline}}
                    </p>
                    {% endif %}

                    {% if object.douban_votes %}
                    <p style="font-size: 20px; color:red">
                        人气： {{object.douban_votes}}
                    </p>
                    {% endif %}

                    <p>
                        <a href="https://www.baidu.com/s?wd={{object.name}}+豆瓣" class="btn btn-info"
                            target="_blank">在互联网上搜索详情</a>

                        {% if user.is_authenticated and object in user.moviepreference.favorite_movie.all %}
                        <button data-href="{% url 'movies-toggle-like' %}" data-movieId="{{ object.id }}"
                            data-userName="{{ user.username }}" class="btn btn-like btn-outline-danger">移除‘喜欢’</button>
                        {% elif user.is_authenticated %}
                        <button data-href="{% url 'movies-toggle-like' %}" data-movieId="{{ object.id }}"
                            data-userName="{{ user.username }}" class="btn btn-like btn-outline-info">喜欢</button>
                        {% endif  %}


                    </p>
                </figcaption>
            </figure>
        </div>
        </ul>
    </div>

</div>
</div>
{% endblock %}

{% block JavaScript%}
<script type="text/javascript">
    $(document).ready(function () {

        $('.btn-like').click(function () {
            var oThis = $(this);
            var nMovieId = oThis.attr('data-movieId');
            var sUserName = oThis.attr('data-userName');
            var sUrl = oThis.attr('data-href');

            $.ajax({
                type: "GET",
                url: sUrl,
                data: {
                    "movie_id": nMovieId,
                    "username": sUserName,
                },
                dataType: "json",

                success: function (data) {
                    // alert(data.status);
                    if (data.status == 'liked') {
                        oThis.removeClass('btn-outline-info').addClass('btn-outline-danger').html('移除‘喜欢’');
                    }
                    else if (data.status == 'disliked') {
                        oThis.removeClass('btn-outline-danger').addClass('btn-outline-info').html('喜欢');
                    }
                }
            });
        });
    });
</script>
{% endblock %}